import PropTypes from "prop-types";
import { Card, Grid, List } from "antd-mobile";

const ItemDetails = (props) => {
  const Description = ({ title, record }) => (
    <Card title={title}>
      <Grid columns={2} gap={12}>
        <Grid.Item>物料编码</Grid.Item>
        <Grid.Item>{record.code}</Grid.Item>
        <Grid.Item>物料名称</Grid.Item>
        <Grid.Item>{record.name}</Grid.Item>
        <Grid.Item>规格型号</Grid.Item>
        <Grid.Item>{record.spec}</Grid.Item>
        <Grid.Item>应出数量</Grid.Item>
        <Grid.Item>{record.prodQty}</Grid.Item>
        <Grid.Item>已出数量</Grid.Item>
        <Grid.Item>{record.receivedQty}</Grid.Item>
        <Grid.Item>计量单位</Grid.Item>
        <Grid.Item>{record.unit}</Grid.Item>
        <Grid.Item>货主组织</Grid.Item>
        <Grid.Item>{record.ownerTenantName}</Grid.Item>
        <Grid.Item>供应组织</Grid.Item>
        <Grid.Item>{record.supplyOrg}</Grid.Item>
      </Grid>
    </Card>
  );

  return (
    <List>
      {props.items.map((i, idx) => (
        <List.Item
          key={idx}
          style={{ backgroundColor: "#F5F5F5" }}
          description={
            <Description
              title={`${idx + 1}/${props.items.length}`}
              record={i}
            />
          }
        />
      ))}
    </List>
  );
};

ItemDetails.propTypes = {
  items: PropTypes.array,
};

export default ItemDetails;
